import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
// import TabBar from '../components/TabBar'
import Home from './Home'
import Mine from './Mine'
import Order from './Order'
import Subscribe from './Subscribe'
import Chat from './Chat'
// import Test from './Test'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

const Index = () => {

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused
              ? 'home'
              : 'home-outline';
          } else if (route.name === 'Mine') {
            iconName = focused ? 'settings' : 'settings-outline';
          } else if(route.name === 'Order') {
            iconName = focused ? 'information-circle' : 'information-circle-outline';
          } else if(route.name === 'Subscribe') {
            iconName = focused ? 'information-circle' : 'information-circle-outline';
          } else if(route.name === 'Chat') {
            iconName = focused ? 'information-circle' : 'information-circle-outline';
          }
          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Subscribe" component={Subscribe} />
      <Tab.Screen name="Order" component={Order} />
      <Tab.Screen name="Chat" component={Chat} />
      <Tab.Screen name="Mine" component={Mine} />
      {/* <Tab.Screen name="Test" component={Test} /> */}
    </Tab.Navigator>
  )
}

export default Index

const styles = StyleSheet.create({})